<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员仪表盘 - 管理系统</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        .navbar {
            border-radius: 10px;
            background-color: #343a40;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
            transition: all 0.3s ease-in-out;
        }

        .navbar:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        /* 增加一些 padding 和 margin 让内容不那么拥挤 */
        .navbar-brand {
            font-weight: bold;
            font-size: 1.25rem;
            color: #ffffff;
            text-transform: uppercase;
            transition: color 0.3s ease;
        }

        .navbar-brand:hover {
            color: #2980b9;
        }

        /* 菜单项样式 */
        .navbar-nav .nav-item .nav-link {
            color: #ffffff;
            font-weight: 500;
            padding: 12px 8px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .navbar-nav .nav-item .nav-link:hover,
        .navbar-nav .nav-item .nav-link:focus {
            color: #ffffff;
            background-color: #2980b9;
            border-radius: 5px;
        }

        .navbar-nav .nav-item.active .nav-link {
            color: #fff;
            background-color: #2980b9;
            border-radius: 5px;
        }

        /* 用户信息和退出登录 */
        .navbar-nav.ms-auto .nav-link {
            color: #ffffff;
            font-weight: 500;
            padding: 12px 20px;
        }

        .navbar-nav.ms-auto .nav-link:hover {
            background-color: #2ecc71;
            color: #fff;
            border-radius: 5px;
        }

        /* 自适应 */
        @media (max-width: 768px) {
            .navbar-collapse {
                margin-top: 10px;
            }
        }
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .container {
            max-width: 1270px;

        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: var(--shadow);
            margin-bottom: 25px;
            overflow: hidden;
        }

        .card-header {
            background-color: var(--dark-color);
            color: white;
            font-weight: 600;
            padding: 15px 20px;
            border-bottom: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .summary-card .card {
            transition: transform 0.3s ease;
            height: 100%;
        }

        .summary-card .card:hover {
            transform: translateY(-5px);
        }

        .display-4 {
            font-size: 2.5rem;
            font-weight: 700;
        }

        .bg-primary .display-4 {
            color: #fff;
        }

        .bg-success .display-4 {
            color: #fff;
        }

        .bg-info .display-4 {
            color: #fff;
        }

        .year-form {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .year-form .form-control {
            width: 120px !important;
        }

        .chart-container {
            width: 100%;
            height: 500px;
        }

        @media (max-width: 768px) {
            .card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .year-form {
                width: 100%;
                margin-top: 10px;
            }

            .display-4 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
<div th:insert="~{common/common::topbar}"></div>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="bi bi-speedometer2"></i> 车辆及维修概览</h5>
                    <a id="refreshBtn" class="btn btn-primary" th:href="@{/chart/refresh}">
                        <i class="bi bi-arrow-clockwise"></i> 刷新数据
                    </a>
                </div>

                <div class="card-body">
                    <div class="row summary-card">
                        <div class="col-md-4">
                            <div class="card text-white bg-primary mb-3">
                                <div class="card-body text-center">
                                    <h5 class="card-title"><i class="bi bi-people"></i> 总客户数量</h5>
                                    <p class="card-text display-4" th:text="${totalCustomers}"></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card text-white bg-success mb-3">
                                <div class="card-body text-center">
                                    <h5 class="card-title"><i class="bi bi-car-front"></i> 车辆数量</h5>
                                    <p class="card-text display-4" th:text="${totalCars}"></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card text-white bg-info mb-3">
                                <div class="card-body text-center">
                                    <h5 class="card-title"><i class="bi bi-tools"></i> 维修记录数量</h5>
                                    <p class="card-text display-4" th:text="${totalRepairs}"></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0"><i class="bi bi-graph-up"></i> 车辆年度销售统计</h5>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="mb-0" th:text="${year} + '年'"></h6>
                                        <form th:action="@{/chart/refresh}" method="get" class="year-form">
                                            <input type="text" class="form-control" id="year" name="year" placeholder="输入年份">
                                            <button type="submit" class="btn btn-primary">查询</button>
                                        </form>
                                    </div>
                                    <div id="incomeChart" class="chart-container"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script src="/js/echarts.min.js"></script>
            <script th:inline="javascript">
                // 后端传来的数据
                var monthlyIncomes = /*[[${monthlyIncomes}]]*/ [];

                // 生成月份标签和对应数据
                var labels = [];
                var data = [];
                for (var i = 1; i <= 12; i++) {
                    labels.push(i + "月");
                    var found = monthlyIncomes.find(m => m.repair_month === i);
                    // 注意 total_income 可能是 BigDecimal 类型，转成数字
                    data.push(found ? parseFloat(found.total_income) : 0);
                }

                // 初始化echarts实例
                var chartDom = document.getElementById('incomeChart');
                var myChart = echarts.init(chartDom);

                // 配置项
                var option = {
                    title: {
                        text:  /*[[${year}]]*/+'年月收入统计',
                        left: 'center',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: '¥ {c0}'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '收入（元）',
                        axisLabel: {
                            formatter: '¥ {value}'
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eee'
                            }
                        }
                    },
                    series: [{
                        name: '收入',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#36a2eb'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(54, 162, 235, 0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(54, 162, 235, 0.1)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }]
                };

                // 使用配置项生成图表
                myChart.setOption(option);

                // 自适应窗口大小
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            </script>
        </div>
    </div>
</div>

<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>